<template>
	<view class="container">
		<view class="header">
			<view class="title">设置</view>
		</view>
		
		<view class="settings-section">
			<view class="section-title">账号设置</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/profile')">
				<text class="item-label">个人资料</text>
				<view class="item-right">
					<text class="item-arrow">></text>
				</view>
			</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/change-password')">
				<text class="item-label">修改密码</text>
				<view class="item-right">
					<text class="item-arrow">></text>
				</view>
			</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/bind-phone')">
				<text class="item-label">绑定手机</text>
				<view class="item-right">
					<text class="item-value">{{userInfo.mobile ? hidePhone(userInfo.mobile) : '未绑定'}}</text>
					<text class="item-arrow">></text>
				</view>
			</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/bind-email')">
				<text class="item-label">绑定邮箱</text>
				<view class="item-right">
					<text class="item-value">{{userInfo.email ? hideEmail(userInfo.email) : '未绑定'}}</text>
					<text class="item-arrow">></text>
				</view>
			</view>
		</view>
		
		<view class="settings-section">
			<view class="section-title">通用设置</view>
			
			<view class="setting-item">
				<text class="item-label">消息通知</text>
				<view class="item-right">
					<switch :checked="settings.notification" @change="toggleSetting('notification')" color="#1BAE76" />
				</view>
			</view>
			
			<view class="setting-item">
				<text class="item-label">学习提醒</text>
				<view class="item-right">
					<switch :checked="settings.studyReminder" @change="toggleSetting('studyReminder')" color="#1BAE76" />
				</view>
			</view>
			

		</view>
		
		<view class="settings-section">
			<view class="section-title">存储管理</view>
			
			<view class="setting-item">
				<text class="item-label">缓存大小</text>
				<view class="item-right">
					<text class="item-value">{{cacheSize}}</text>
					<text class="item-action" @click="clearCache">清除</text>
				</view>
			</view>
		</view>
		
		<view class="settings-section">
			<view class="section-title">其他</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/feedback')">
				<text class="item-label">意见反馈</text>
				<view class="item-right">
					<text class="item-arrow">></text>
				</view>
			</view>
			
			<view class="setting-item" @click="navigateTo('/packageMy/my/about')">
				<text class="item-label">关于我们</text>
				<view class="item-right">
					<text class="item-arrow">></text>
				</view>
			</view>
			
			<view class="setting-item" @click="checkUpdate">
				<text class="item-label">检查更新</text>
				<view class="item-right">
					<text class="item-value">当前版本 1.0.0</text>
					<text class="item-arrow">></text>
				</view>
			</view>
		</view>
		
		<view class="logout-btn" @click="logout">退出登录</view>
	</view>
</template>

<script>
	import { getToken } from '../../utils/tokenManager.js';
	
	export default {
		data() {
			return {
				userInfo: {
					mobile: '',
					email: ''
				},
				settings: {
					notification: true,
					studyReminder: true
				},
				cacheSize: '0MB'
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo();
			
			// 获取设置信息
			this.getSettings();
			
			// 获取缓存大小
			this.getCacheSize();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = JSON.parse(userInfo);
				} else {
					// 调用云对象获取用户信息
					this.getUserInfoFromCloud();
				}
			},
			
			// 从云端获取用户信息
			async getUserInfoFromCloud() {
				try {
					const userService = uniCloud.importObject('user-service');
					const res = await userService.getUserInfo(getToken());
					
					if (res.code === 0) {
						this.userInfo = res.data.userInfo;
						// 保存到本地存储
						uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
					} else {
						// 如果云对象不可用，使用模拟数据
						this.getMockUserInfo();
					}
				} catch (err) {
					console.error('获取用户信息失败', err);
					// 如果云对象不可用，使用模拟数据
					this.getMockUserInfo();
				}
			},
			
			// 获取模拟用户信息
			getMockUserInfo() {
				this.userInfo = {
					mobile: '13800138000',
					email: 'referee001@example.com'
				};
			},
			
			// 获取设置信息
			getSettings() {
				// 从本地存储获取设置信息
				const settings = uni.getStorageSync('settings');
				if (settings) {
					this.settings = JSON.parse(settings);
				}
			},
			
			// 获取缓存大小
			getCacheSize() {
				// 获取缓存大小
				uni.getStorageInfo({
					success: (res) => {
						const size = res.currentSize;
						if (size < 1024) {
							this.cacheSize = size + 'KB';
						} else {
							this.cacheSize = (size / 1024).toFixed(2) + 'MB';
						}
					},
					fail: (err) => {
						console.error('获取缓存大小失败', err);
						this.cacheSize = '0MB';
					}
				});
			},
			
			// 切换设置
			toggleSetting(key) {
				this.settings[key] = !this.settings[key];
				// 保存设置到本地存储
				uni.setStorageSync('settings', JSON.stringify(this.settings));
				
				// 根据设置类型显示不同的提示
				let message = '';
				switch (key) {
					case 'notification':
						message = this.settings[key] ? '已开启消息通知' : '已关闭消息通知';
						break;
					case 'studyReminder':
						message = this.settings[key] ? '已开启学习提醒' : '已关闭学习提醒';
						break;

				}
				
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},
			
			// 清除缓存
			clearCache() {
				uni.showModal({
					title: '提示',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '清除中...'
							});
							
							// 清除本地存储
							uni.clearStorageSync();
							
							// 保留必要的信息
							const token = uni.getStorageSync('token');
							if (token) {
								uni.setStorageSync('token', token);
							}
							
							// 重新获取用户信息和设置
							this.getUserInfo();
							this.getSettings();
							
							// 更新缓存大小
							this.getCacheSize();
							
							uni.hideLoading();
							uni.showToast({
								title: '缓存已清除',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 检查更新
			checkUpdate() {
				uni.showLoading({
					title: '检查中...'
				});
				
				// 模拟检查更新
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '当前已是最新版本',
						icon: 'none'
					});
				}, 1000);
			},
			
			// 退出登录
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除token
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							
							// 跳转到登录页
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			
			// 页面跳转
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 隐藏手机号中间四位
			hidePhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			
			// 隐藏邮箱用户名部分
			hideEmail(email) {
				if (!email) return '';
				const parts = email.split('@');
				if (parts.length !== 2) return email;
				
				const name = parts[0];
				const domain = parts[1];
				
				if (name.length <= 2) {
					return name + '***@' + domain;
				} else {
					return name.substring(0, 2) + '***@' + domain;
				}
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		padding-bottom: 40rpx;
	}
	
	/* 头部样式 */
	.header {
		background-color: #FFFFFF;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	/* 设置区域样式 */
	.settings-section {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}
	
	.section-title {
		font-size: 28rpx;
		color: #999999;
		padding: 20rpx 0;
	}
	
	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.item-label {
		font-size: 30rpx;
		color: #333333;
	}
	
	.item-right {
		display: flex;
		align-items: center;
	}
	
	.item-value {
		font-size: 28rpx;
		color: #999999;
		margin-right: 10rpx;
	}
	
	.item-action {
		font-size: 28rpx;
		color: #1BAE76;
		margin-left: 20rpx;
	}
	
	.item-arrow {
		font-size: 28rpx;
		color: #CCCCCC;
		margin-left: 10rpx;
	}
	
	/* 退出登录按钮样式 */
	.logout-btn {
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FFFFFF;
		color: #FF3B30;
		font-size: 32rpx;
		text-align: center;
		border-radius: 45rpx;
		margin: 60rpx auto 0;
	}
</style> 